<template>
  <view class="search-view">
    <view :style="{ height: capsuleInfo.top + 'px' }"> </view>
    <view class="search-input" @tap="goSearch" :style="{
      height: capsuleInfo.height + 'px',
      width: capsuleInfo.left - 20 + 'px',

    }">
      <image src="/static/sousuo.png" mode="widthFix" />
      <input disabled placeholder="搜索商品" placeholder-class="input-color" :style="{ height: capsuleInfo.height + 'px' }" />
    </view>

    <view class="merchant-store">
      <view class="address-view">
        <image src="/static/xing.png" mode="widthFix" />
        <text>{{ merchantInfo?.name }}+</text>
        <text>{{ store.deliveryType === 0 ? "到店自取" : "外卖到家" }}</text>
      </view>
      <view class="distance-view">
        <image src="/static/weizhi.png" mode="widthFix" />
        <text v-if="apartDistance">商家距离你{{ apartDistance }}</text>
        <text v-else @tap="goSetting">请先开启定位下单</text>
      </view>
    </view>
  </view>
  <view :style="{ height: spaceHeight }"></view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import type { Distance, MerchantInfo } from "@/types";
import request from "@/api/request";
import { useStore } from "@/store";
const store = useStore();
const emit = defineEmits(["openGpt"]);
const merchantInfo: MerchantInfo = uni.getStorageSync("merchant_info");
const apartDistance = ref();
const spaceHeight = ref("");
const capsuleInfo = uni.getStorageSync("capsule_btn");
const instance = getCurrentInstance();
onLoad(() => {
  getNodeInfo();
  getLocation();
});
const goSetting = () => {
  uni.openSetting({
    success: (result) => {
      if (result.authSetting["scope.userLocation"]) {
        getLocation();
      }
      console.log(result);
    },
  });
};
function getNodeInfo() {
  // 获取元素节点信息
  const query: any = uni.createSelectorQuery().in(instance);
  query
    .select(".search-view")
    .boundingClientRect((data: UniApp.NodeInfo) => {
      spaceHeight.value = data.height + "px";
    })
    .exec();
}
function getLocation() {
  uni.getLocation({
    success: async (res) => {
      const distance = await requestDistance([res.latitude, res.longitude]);
      apartDistance.value = distance;
      emit("openGpt");
    },
    fail: (err) => {
      uni.showModal({
        title: "地理位置未授权",
        content: "开启定位才可下单",
        success: (res) => {
          console.log(res);
          if (res.confirm) {
            // 调起小程序设置界面
            goSetting();
          } else {
            console.log("用户拒绝定位");
          }
        },
      });
      console.log(err);
    },
  });
}
const goSearch = () => {
  uni.navigateTo({ url: "/pages/search/index" })
}
async function requestDistance(from: number[]) {
  const { data } = await request<Distance>("/getDistance", {
    _id: "662956e5f7fad9e098e0800b",
    from,
  });
  return data?.distance;
}
console.log(capsuleInfo);
</script>

<style>
/* 顶部搜索框 */
.search-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #ffffff;
}

/*  距离和配送范围 */
.merchant-store {
  height: 150rpx;
  font-size: 35rpx;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20rpx;
}

.merchant-store view {
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}

.address-view text {
  padding: 0 10rpx;
}

.address-view text:nth-child(2) {
  flex: 1;
}

.address-view image {
  width: 30rpx;
}

.distance-view image {
  width: 27rpx;
}

.distance-view text {
  font-size: 28rpx;
  color: #999999;
  font-weight: initial;
  padding-left: 15rpx;
}
</style>
